@import '@snack-uikit/figma-tokens/build/scss/styles-theme-variables';

.wrapper {
  display: flex;

  width: max-content;
  margin-bottom: 16px;
  padding: 24px;

  background-color: $sys-neutral-background1-level;
  border: 1px solid $sys-neutral-decor-default;
  border-radius: $dimension-050m;
}

$border-width: 1px;

.table {
  display: grid;
  grid-template-columns: repeat(7, max-content);
  flex-direction: column;

  width: max-content;

  background-color: $sys-neutral-background1-level;
  border: $border-width solid $sys-neutral-decor-default;
}

.cell {
  display: flex;
  align-items: center;
  justify-content: flex-start;

  padding: 4px 8px;

  text-transform: capitalize;

  border-bottom: $border-width solid $sys-neutral-decor-default;
}

.headerCell {
  text-transform: uppercase;
}

.firstCell {
  padding-top: 24px;
}